<template>
    <div class="container">
        <!-- 授权管理 -->
        <div class="authmanageMentMain">
            <el-row>
                <el-col :span="12" style="padding-right: 16px">
                    <el-form
                        :inline="true"
                        :model="formData"
                        class="demo-form-inline formData_form_inline"
                        size="small"
                    >
                        <el-form-item label="角色名称">
                            <el-input v-model="formData.roleName" placeholder="请输入角色名称"></el-input>
                        </el-form-item>
                        <el-form-item label="角色描述">
                            <el-input v-model="formData.roleDesc" placeholder="请输入角色描述"></el-input>
                        </el-form-item>
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-search"
                            @click="hanlesearch"
                            :loading="searchLoading"
                            class="searchBtn"
                        >查询</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-refresh-right"
                            @click="handleReset"
                            :loading="resetLoading"
                            class="resetBtn"
                        >重置</el-button>
                    </el-form>
                    <el-table
                        :data="tableData"
                        width="100%"
                        highlight-current-row
                        border
                        @row-click="handleClick"
                        stripe
                        class="heard-bg"
                    >
                        <el-table-column label="角色名称" prop="roleName"></el-table-column>
                        <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
                        <el-table-column label="角色状态" prop="roleStatus">
                            <template slot-scope="scope">
                                <span v-if="scope.row.roleStatus === 'normal'">正常</span>
                                <span v-else-if="scope.row.roleStatus === 'freeze'">冻结</span>
                                <span v-else-if="scope.row.roleStatus === 'del'">已删除</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="角色类型">
                            <template slot-scope="scope">
                                <span v-if="scope.row.roleType === '0'">普通用户</span>
                                <!--<span v-else-if="scope.row.roleType === '1'">超级管理员</span>-->
                                <span v-else-if="scope.row.roleType === '2'">超级管理员</span>
                                <span v-else-if="scope.row.roleType === '4'">在线用户</span>
                                <span v-else-if="scope.row.roleType === '5'">离线用户</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <div class="pagination">
                        <Pagination
                            :hanleChangeCurrentPage="hanleChangeCurrentPage"
                            :handleChangeSize="handleChangeSize"
                            :currentPage="currentPage"
                            :pageSize="pageSize"
                            :total="total"
                        />
                    </div>
                </el-col>
                <el-col :span="12" id="grid-content">
                    <el-scrollbar wrap-class="side-bar-scrollbar-wrap"
                        class="elTree_wrap" 
                        v-loading="pageLoading"
                        element-loading-background="rgba(255, 255, 255, 0.7)" >
                        <el-tree
                            class="tree_wrap"
                            :data="menuList"
                            show-checkbox
                            node-key="id"
                            :default-checked-keys="checkedKeys"
                            :check-on-click-node="true"
                            ref="tree"
                            highlight-current
                            @check-change="handleCheckChange"
                            :props="defaultProps"
                            :accordion="true"
                            :default-expanded-keys='expandedKeys'
                        ></el-tree>
                    </el-scrollbar>
                    <el-button type="primary" size="small" @click="roleMenu" class="btn_right">保存</el-button>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination/Pagination.vue';

export default {
    name: 'authorizeBusiness',
    components: {
        Pagination,
    },
    data() {
        return {
            formData: {
                roleName: '',
                roleDesc: '',
            },
            // 搜索loading
            searchLoading: false,
            // 重置loading
            resetLoading: false,
            // 当前页码
            currentPage: 1,
            // 页码大小
            pageSize: 10,
            // 总数
            total: 0,
            // 表格内容
            tableData: [],
            menuList: [],
            defaultProps: {
                label: 'menuName',
                children: 'child',
            },
            checkedKeys: [],
            roleId: '',
            pageLoading:false,
            expandedKeys:[3,6],
        };
    },
    mounted() {
        this.getInitData(this.formData);
        this.getMenuList();
        console.log('this.$route.path',this.$route.path);
        (this.$route.path=='/index/authorizeBusiness')?this.expandedKeys=[1]:this.expandedKeys=[3,6]
    },
    methods: {
        // 获取角色表格数据
        getInitData(form) {
            let params = {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
            };
            params = Object.assign({}, params, form);
            this.$post.roleMangage.searchByRole(params)
                .then((res) => {
                    if (res.data.success) {
                        this.tableData = res.data.content.roleList;
                        this.total = res.data.content.roleCount;
                    }
                });
        },
        // 点击某一行查询详情
        handleClick(row) {
            this.pageLoading = true;
            this.roleId = row.id;
            let type = null;
            if (this.$route.path === '/index/authorizeManagement') {
                type = '1';
            } else {
                type = '2';
            }
            let params = {
                id: row.id,
                bindFlag: type,
            };
            if (type === '1') {
                this.$post.nebulaApi.getMenuListByRoleId(params).then((ress) => {
                    this.$nextTick(() => {
                        this.$refs.tree.setCheckedKeys(ress.data.content.ids);
                        this.pageLoading = false;
                    });
                }, (err) => {
                    this.$message.error(err);
                });
            } else {
                this.$post.busiMenu.getBusiMenuListByRoleId(params).then((ress) => {
                    this.$nextTick(() => {
                        this.$refs.tree.setCheckedKeys(ress.data.content.ids);
                        this.pageLoading = false;
                    });
                }, (err) => {
                    this.$message.error(err);
                });
            }
        },
        getMenuList() {
            let type = null;
            if (this.$route.path === '/index/authorizeManagement') {
                // 功能菜单
                type = '1';
                this.$post.nebulaApi.setMenuListInfo({ isUsable: 1, category: type }).then((res) => {
                    this.menuList = res.data.content;
                }, (err) => {
                    this.$message.error(err);
                });
            } else {
                // 业务菜单
                type = '2';
                this.$post.busiMenu.busiMenuTreeList({ isUsable: 1, category: type }).then((res) => {
                    this.menuList = res.data.content;
                }, (err) => {
                    this.$message.error(err);
                });
            }

        },
        roleMenu() {
            let type = null;
            if (this.$route.path === '/index/authorizeManagement') {
                type = '1';
            } else {
                type = '2';
            }
            let params = {
                id: this.roleId,
                ids: this.handleCheckChange(),
                bindFlag: type,
            }
            if (params.ids.length <= 0) {
                this.$message.warning('至少选择一项进行分配！');
                return;
            }


            if (type === '1') {
                this.$post.grantRole.roleMenu(params).then((res) => {
                    if (res.data.success) {
                        this.$message.success('分配系统菜单成功!');
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }, (err) => {
                    this.$message.error(err);
                });
            } else {
                this.$post.grantRole.roleBusiMenu(params).then((res) => {
                    if (res.data.success) {
                        console.log('roleBusiMenu返回数据', res);
                        this.$message.success('分配业务菜单成功!');
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }, (err) => {
                    this.$message.error(err);
                });
            }

        },
        handleCheckChange() {
            let arr = this.$refs.tree.getCheckedKeys();
            arr = arr.concat(this.$refs.tree.getHalfCheckedKeys());
            return arr;
        },
        // 点击搜索
        hanlesearch() {
            this.currentPage = 1;
            this.pageSize = 10;
            this.getInitData(this.formData);
        },
        // 点击重置
        handleReset() {
            this.formData = {
                roleName: '',
                roleDesc: '',
            };
            this.currentPage = 1;
            this.pageSize = 10;
            this.getInitData(this.formData);
        },
        // 页码切换方法
        hanleChangeCurrentPage(val) {
            this.currentPage = val;
            this.getInitData(this.formData);
        },
        // 切换分页大小方法
        handleChangeSize(val) {
            this.pageSize = val;
            this.getInitData(this.formData);
        },
    },
};
</script>

<style  lang="scss">
.authmanageMentMain #grid-content {
    margin-bottom: 10px;
    height: 93%;
    .elTree_wrap {
        .el-scrollbar__bar.is-vertical{
            display: none;
        }
    }
    .el-scrollbar {
        margin-bottom: 10px;
        height: 100%;
        overflow: hidden;
        overflow-y: auto;
        padding: 5px 10px;
        border: 1px solid #ccc;
        border-radius: 10px;
    }
    .el-scrollbar__wrap {
        overflow: hidden;
        overflow-y: auto;
        height: 100%;
        background-color: #8bc34a99;
        border-radius: 10px;
    }

    .side-bar-scrollbar-wrap {
        /* max-height: 650px;
        min-height: 650px; */
        margin-bottom: 10px;
    }
    .btn_right {
        float: right;
        margin-right: 50px;
    }

    .el-tree {
        border-radius: 10px;
    }
}

.container {
    width: 100%;
    height: 100%;
    /* 页面样式 要强硬一点 要比 全局样式 权限 要高一点 */
    .authmanageMentMain {
        width: 100%;
        height: 100% !important;
        background: #fff;
        border-radius: 5px;
        padding: 20px;
        box-sizing: border-box;
        text-align: left;
        .el-row {
            height: 100%;
        }
        .el-tree-node__label {
            margin-left: 5px;
        }
        .tableTitle {
            width: 100%;
            height: 48px;
            border: 1px solid #eee;
            border-bottom: none;
            line-height: 48px;
            margin-top: 20px;
            color: #666;
        }
        .pagination {
            margin-top: 20px;
            text-align: right;
            float: left;
        }
    }
}
</style>
